<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <div style=" height: 100%; padding: 20px;">
                    <a-form layout="vertical" style="height:100%;">
                                <a-form-item  :label="filterI18n('title','标题')">
                                    <a-input v-model:value="title" style="width: 100%"></a-input>
                                </a-form-item>

                                <a-form-item  :label="filterI18n('dateFormat','日期格式')">
                                    <a-select :placeholder="filterI18n('dateFormat','日期格式')"
                                              :options="dateFormats" v-model:value="settings.format"></a-select>
                                </a-form-item>

                                <a-form-item  :label="filterI18n('defaultValues','默认值')">
                                    <a-range-picker
                                        style="width: 100%;"
                                        :locale="locale"
                                        :show-time="settings.format!='YYYY-MM-DD'"
                                        v-model:value="date"
                                        :format="settings.format || 'YYYY-MM-DD'"
                                        @change="rangeDateChange"
                                    />
                                </a-form-item>
                    </a-form>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import filter from "./filter";
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default {
    name: "dateRange-filter",
    mixins:[filter],
    data() {
        return {
            dateFormats:[
                {value:'YYYY-MM-DD',label:'YYYY-MM-DD'},
                {value:'YYYY-MM-DD HH:mm:00',label:'YYYY-MM-DD HH:mm:00'},
                {value:'YYYY-MM-DD HH:mm',label:'YYYY-MM-DD HH:mm'},
                {value:'YYYY-MM-DD HH:mm:ss',label:'YYYY-MM-DD HH:mm:ss'}
            ],
			date:null,
            locale,
        }
    },
    methods: {
		filterI18n(name,text,key){
			return this.$ti18(name,text,"filterControllerLang",key);
		},
        //初始化配置
        initSetting() {
            if(this.row.settings){
                this.settings =this.row.settings;
				if(this.row.value && this.row.value.length>0){
					let ary = [];
					ary.push(dayjs(this.row.value[0],this.settings.format||'YYYY-MM-DD'));
					ary.push(dayjs(this.row.value[1],this.settings.format||'YYYY-MM-DD'));
					this.date=ary;
				}
            }else {
                this.settings = {
                    format:"YYYY-MM-DD"
                }
            }
        },
		rangeDateChange(values) {
            if(values){
                let ary = [];
                ary.push(dayjs(values[0]).format(this.settings.format || 'YYYY-MM-DD'));
                ary.push(dayjs(values[1]).format(this.settings.format || 'YYYY-MM-DD'));
                this.defValue= ary;
            }else {
                this.defValue = ''
            }
		},
    },
    watch: {

    }
}
</script>

<style scoped>
</style>
